<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<style>
			#btn_add_friend {
		        	background-color: #1aad19;
		        }
		        #btn_add_friend:active {
		            background-color: #128e12;
		        }
			</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<h1 class="mui-title title-color"><b id="chatting-nickname">详细资料</b></h1>
		</header>
		<div class="mui-content">

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="padding-top: 10px;">
					<a href="javascript:;">
						<img id="img_friend_face" class="mui-media-object mui-pull-left" src="" style="border-radius: 8%;line-height: 50px;max-width: 50px;height: 50px;">
						<div class="mui-media-body">
							<label id="lab_friend_nickname"></label>
							<p id="p_friend_username" class="mui-ellipsis"></p>
						</div>
					</a>
				</li>
			</ul>

			<br />
			<div style="text-align: center;">
				<button id="btn_add_friend" type="button" class="mui-btn mui-btn-block" style="color: white;width: 90%;display: inline;padding: 12px 0">添加好友</button>
				<button id="btn_back" type="button" class="mui-btn mui-btn-block" style="width: 90%;display: inline;padding: 12px 0">返回</button>
			</div>
		</div>

		<script src="js/mui.js"></script>
		<script src="./js/app.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				var meInfo = app.getUserGlobalInfo();
				var currentWebview = plus.webview.currentWebview();
				var yourFriend = currentWebview.willBeFriend;

				var img_friend_face = document.getElementById("img_friend_face");
				var lab_friend_nickname = document.getElementById("lab_friend_nickname");
				var p_friend_username = document.getElementById("p_friend_username");

				img_friend_face.src = app.imgServerUrl + yourFriend.faceImage;
				lab_friend_nickname.innerHTML = yourFriend.nickname;
				p_friend_username.innerHTML = "online号: " + yourFriend.username;

				// 发送添加好友的请求
				var btn_add_friend = document.getElementById("btn_add_friend");
				btn_add_friend.addEventListener("tap", function() {

					plus.nativeUI.showWaiting("请稍后...");
					mui.ajax(app.serverUrl + "/online/friends-request/addFriendRequest?myUserId=" + meInfo.id +
						"&friendUserId=" + yourFriend.id, {
							data: {},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(data) {
								//服务器返回响应
								plus.nativeUI.closeWaiting();

								if (data.code == 20000) {

									app.showToast("好友请求已发送...", "success");

									mui.openWindow({
										url: "index.html",
										id: "index.html"
									});
								} else {
									app.showToast(data.message, "error");
								}
							}
						});

				});

				// 绑定返回的函数
				var btn_back = document.getElementById("btn_back");
				btn_back.addEventListener("tap", function() {
					mui.back();
				});
			});
		</script>
	</body>

</html>
